import React, {useEffect, useState} from 'react'

import axios from 'axios';
import axiosConfig from "../../utils/axios.config";

import './index.css'
import {nanoid} from "nanoid";
export default function Message() {

    const[messageItem,setMessageItem] = useState([]);

    function getMessage(){
        axios({
            url:'/message/getMessage',
            baseURL:axiosConfig.baseURL,
            method:'GET'
        }).then((response)=>{
            console.log(response.data)
            setMessageItem(response.data.messageList)
        }).catch((err)=>{
            console.log(err)
        })
    }
    useEffect(()=>{
        getMessage()
    },[])

  return (
    <div className="message-box">
      <header className="message-header">
        <h3>网站留言</h3>
      </header>
      <main className="message-main">
          {
              messageItem.map(item => {
                  return (
                      <div key={nanoid()} className="message-card">
                          <div className="message-card-info">
                              <span>{item.name}</span>
                              <span>{item.email}</span>
                              <span>{item.time}</span>
                          </div>
                          <div className="message-card-content">{item.body}</div>
                      </div>
                  )
              })
          }
      </main>
    </div>
  )
}
